<template>
  <el-config-provider :locale="locale" :size="assemblySize" :button="buttonConfig">
    <router-view></router-view>
    <div class="box" v-if="globalState.loading">
      <a-spin class="load" :tip="globalState.tip" />
    </div>
    <LockScreen />
  </el-config-provider>
</template>

<script setup lang="ts">
import { onMounted, reactive, computed, ref, inject } from "vue";
import { useI18n } from "vue-i18n";
import { getBrowserLang } from "@/utils";
import { useTheme } from "@/hooks/useTheme";
import { useScrollbar } from "@/hooks/useScrollbar";
import { ElConfigProvider } from "element-plus";
import { useGlobalStore } from "@/stores/modules/global";
import { ElMessageBox } from "element-plus";
import LockScreen from "@/components/LockScreen/index.vue";
import en from "element-plus/es/locale/lang/en";
import zhCn from "element-plus/es/locale/lang/zh-cn";
// import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import localCache from "@/utils/cache";

const globalStore = useGlobalStore();
const globalState: any = inject("globalState");
// init theme
const { initTheme } = useTheme();
initTheme();

// init scrollbar
const { initScrollbar } = useScrollbar();
initScrollbar();

// init language
const i18n = useI18n();
onMounted(() => {
  const language = globalStore.language ?? getBrowserLang();
  i18n.locale.value = language;
  globalStore.setGlobalState("language", language);
});

// element language
const locale = computed(() => {
  if (globalStore.language == "zh") return zhCn;
  if (globalStore.language == "en") return en;
  return getBrowserLang() == "zh" ? zhCn : en;
});

// element assemblySize
const assemblySize = computed(() => globalStore.assemblySize);

// element button config
const buttonConfig = reactive({ autoInsertSpace: false });

/**
 * @名字: 页面长时间无操作时，系统自动退出登录页面
 * @详情:
 * @参数:
 * @返回值:
 */
// 鼠标最后一次点击时间
const lastTime = ref();
// 当前时间
const currentTime = ref();
// 系统安全时间
const sys_timeout = computed(() => globalStore.overtime * 60 * 1000);
//探测间隔时间
const check_time = ref(3 * 60 * 1000);
// 定时器
const timer = ref();
const onload = () => {
  timer.value = window.setInterval(checkTimeOut, check_time.value);
};
// 判断系统无操作时间是否大于安全时间
const checkTimeOut = () => {
  currentTime.value = new Date().getTime();
  if (currentTime.value - lastTime.value > sys_timeout.value && globalStore.showOvertime) {
    if (localCache.getCache("user", false) !== undefined) {
      clearInterval(timer.value); //清除定时器
      localCache.deleteCache("user", false); //清除token
      ElMessageBox.confirm("身份验证已过期，请重新登录", "提示", {
        confirmButtonText: "确定",
        type: "warning"
      })
        .then(() => {
          location.reload();
        })
        .catch(() => {
          location.reload();
        });
    }
  }
};
onMounted(() => {
  currentTime.value = new Date().getTime();
  lastTime.value = new Date().getTime();
  window.document.onmousedown = event => {
    lastTime.value = new Date().getTime();
  };
  onload();
});
</script>
<style lang="scss">
.box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 45%);
  .load {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -90px;
    transform: translate(-50%);
    .ant-spin-dot-item {
      background-color: var(--el-color-primary);
    }
    .ant-spin-text {
      color: var(--el-color-primary);
    }
  }
}
</style>
